﻿@page "/web-speech"
@inject IStringLocalizer<WebSpeeches> Localizer

<h3>@Localizer["WebSpeechTitle"]</h3>

<h5>@((MarkupString)Localizer["WebSpeechDescription"].Value)</h5>


<PackageTips Name="BootstrapBlazor.WebAPI" />

<DemoBlock Title="@Localizer["WebSpeechNormalTitle"]" Introduction="" Name="WebSpeechNormal">
    <div class="row g-3 mb-3">
        <WebSpeech @ref="WebSpeech" OnResult="@OnResult" OnIsBusy="@OnIsBusy" OnStatus="@OnStatus" OnError="@OnError" />
        <div class="col-12">
            <BootstrapInputGroup>
                <Button Text="普通话" OnClick="SpeechRecognition" IsAsync />
                <Button Text="粤语" OnClick="SpeechRecognitionHK" IsAsync />
                <Button Text="英文" OnClick="SpeechRecognitionEN" IsAsync />
                <Button Text="西文" OnClick="SpeechRecognitionES" IsAsync />
                <Button Text="停止" OnClick="SpeechRecognitionStop" Icon="fa-fw fa-solid fa-stop" IsAsync />
            </BootstrapInputGroup>
        </div>
        <div>
            <Checkbox TValue="bool" ShowLabel="true" @bind-Value="@Options.Continuous" />
        </div>
        <div>
            <Checkbox TValue="bool" ShowLabel="true" @bind-Value="@Options.InterimResults" />
        </div>
        <div style="width: 160px;">
            <BootstrapInputNumber ShowLabel="true" ShowButton="true" @bind-Value="@Options.MaxAlternatives" Max="10" Min="1" />
        </div>
        <div class="col-12">
            <Textarea Value="@Result" />
        </div>

    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["WebSpeechGameTitle"]" Introduction="" Name="WebSpeechGame">

    <div class="row g-3 mb-3">
        <WebSpeech @ref="WebSpeechGame" OnResult="@OnResult" OnIsBusy="@OnIsBusy" OnStatus="@OnStatus" OnError="@OnError" />
        <div class="col-12">
            <BootstrapInputGroup>
                <Button Text="普通话" OnClick="SpeechRecognitionDemo" IsAsync />
                <Button Text="粤语" OnClick="SpeechRecognitionHKDemo" IsAsync />
                <Button Text="英文" OnClick="SpeechRecognitionENDemo" IsAsync />
                <Button Text="西文" OnClick="SpeechRecognitionESDemo" IsAsync />
                <Button Text="停止" OnClick="SpeechRecognitionDemoStop" Icon="fa-fw fa-solid fa-stop" IsAsync />
            </BootstrapInputGroup>
        </div>

        @if (WebSpeechGame != null && WebSpeechGame.IsBusy)
        {
            <Spinner />
        }

        <p class="hints"></p>
        <div>
            <p class="output"><em>...</em></p>
        </div>
    </div>

</DemoBlock>

<DemoBlock Title="@Localizer["WebSpeechSynthesisTitle"]" Introduction="" Name="WebSpeechSynthesis">
    <div class="row g-3 mb-3">
        <div class="col-12">
            <BootstrapInputGroup>
                <Button Text="普通话" OnClick="SpeechSynthesis" IsAsync />
                <Button Text="粤语" OnClick="SpeechSynthesisHK" IsAsync />
                <Button Text="英文" OnClick="SpeechSynthesisEN" IsAsync />
                <Button Text="西文" OnClick="SpeechSynthesisES" IsAsync />
                <Button Text="停止" OnClick="SpeechStop" Icon="fa-fw fa-solid fa-stop" IsAsync />
            </BootstrapInputGroup>
        </div>
        <div class="col-12">
            <WebSpeech @ref="WebSpeechSynthesis" OnResult="@OnResult" OnIsBusy="@OnIsBusy" OnStatus="@OnStatus" OnError="@OnError" />
        </div>
        <p>
            @Message
        </p>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["WebSpeechSynthesisCustomTitle"]" Introduction="" Name="WebSpeechSynthesisCustom">
    <div class="row g-3">
        <div class="col-12">
            @if (WebVoiceList != null && WebVoiceList.Any())
            {
                <select id="voiceSelect" class="form-select" @onchange="((e)=>OnChange(e))" style="width:70vw; max-width: 400px;">
                    @foreach (var voice in WebVoiceList)
                    {
                        <option value="@voice.VoiceURI">@($"{(voice.LocalService ? "" : "*")}{voice.Name} ({voice.Lang})")</option>
                    }
                </select>

            }
        </div>
        <div class="col-12">
            速率
            <input type="range" min="0.1" max="10" step="0.1" style="width:70vw; max-width: 400px;" @bind-value="Options2.Rate" />
        </div>
        <div class="col-12">
            音高
            <input type="range" min="0" max="2" step="0.1" style="width: 70vw; max-width: 400px; " @bind-value="Options2.Picth">
        </div>
        <div class="col-12">
            音量
            <input type="range" min="0" max="1" step="0.01" style="width: 70vw; max-width: 400px; " @bind-value="Options2.Volume" />
        </div>
        <div class="col-12">
            <Textarea @bind-Value="SpeakText" />
        </div>
        <div class="col-12">
            <BootstrapInputGroup>
                <Button Text="测试" OnClick="SpeechSynthesisDIY" Icon="fa-fw fa-solid fa-play" IsAsync />
                <Button Text="停止" OnClick="SpeechDIYStop" Icon="fa-fw fa-solid fa-stop" IsAsync />
                <Button Text="语音列表" OnClick="GetVoiceList" IsAsync />
            </BootstrapInputGroup>
        </div>
        <div class="col-12">
            <WebSpeech @ref="WebSpeechDIY" OnResult="@OnResult" OnIsBusy="@OnIsBusy" OnStatus="@OnStatus" OnError="@OnError" />
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
